<template>
  <view class="tag-page">
    <view class="tag-content">
      <view class="tag-icon" :style="{ background: tag.iconColor }">
        <i class="icon iconfont" :class="tag.icon"></i>
      </view>
      <input
        type="text"
        placeholder="请输入分类名称"
        maxlength="4"
        :value="tag.name"
        @input="handleNameChange"
      />
      <span>{{ tag.name.length }}/4</span>
    </view>
    <icon-select
      ref="tagRef"
      @change="handleAttrChange"
      :icon="tag.icon"
      :iconColor="tag.iconColor"
    ></icon-select>

    <view class="options-btn">
      <tb-button @click="handleSave(true)">继续添加</tb-button>
      <tb-button @click="handleSave(false)">保存</tb-button>
    </view>
  </view>
</template>
<script lang="ts">
import colors from '@/components/tagSelector/color'
import IconSelect from '@/components/tagSelector/index.vue'
import { tag } from '@/type/books'
import Vue from 'vue'
import { mapState } from 'vuex'
export default Vue.extend({
  components: { IconSelect },
  data() {
    const color = colors[Math.floor(Math.random() * 32)]
    console.log(color, 'color')
    return {
      tag: {
        icon: 'icon-canyin',
        iconColor: color,
        name: '',
      } as tag,
      tagName: '',
      type: '支出' as '收入' | '支出',
      index: -2, // -2表示新增标签，其他值为修改的分类在分类列表中的下标
      from: '', // 页面来源
    }
  },
  computed: {
    ...mapState('books', ['bookInfo']),
  },
  methods: {
    handleAttrChange({ icon, color }: any) {
      this.tag.icon = icon
      this.tag.iconColor = color
    },
    handleNameChange(e: any) {
      this.tag.name = e.target.value
    },
    // 保存/继续添加 isContinue-是否继续添加
    handleSave(isContinue = false) {
      if (!this.tag.name) {
        return uni.showToast({ title: '请输入分类名称', icon: 'none' })
      }
      const tagNameList = this.bookInfo.tagList
        .filter((tag: tag) => tag.type === this.type && tag.operateType !== 3)
        .map((tag: tag) => {
          return tag.name
        })
      console.log(tagNameList, 'tagNameList')
      const indexOf = tagNameList.indexOf(this.tag.name)
      if (indexOf !== -1 && indexOf !== this.index) {
        return uni.showToast({ title: '已存在相同名称的分类', icon: 'none' })
      }
      const curTag: tag = {
        ...this.tag,
        type: this.type,
        operateType: this.index === -2 ? 1 : 2,
      }
      let tagList = [...this.bookInfo.tagList]
      let tagVOList = [...this.bookInfo.tagVOList]
      if (this.index === -2) {
        // 新增
        if (this.from === 'record') {
          // 从保存记录页面过来的即 from=record  调用新增接口增加
          this.$api
            .postTagsApi({
              ...this.tag,
              type: this.type,
              bookId: this.bookInfo.id,
            })
            .then((res: any) => {
              if (res.code === 1) {
                tagVOList.push({...res.data})
                this.$store.commit('books/SET_TAGVOLIST', tagVOList)
              }
            })
        } else {
          tagList.push(curTag)
        }
      } else {
        // 编辑
        if (this.from === 'record') {
          // 从保存记录页面过来的即 from=record  调用编辑接口编辑
          this.$api
            .putTagsApi({
              ...this.tag,
            })
            .then((res: any) => {
              if (res.code === 1) {
                tagVOList = tagVOList.map((tag: tag) => {
                  if(tag.name === this.tagName) {
                    tag = {...res.data}
                  }
                  return tag
                })
                this.$store.commit('books/SET_TAGVOLIST', tagVOList)
              }
            })
        } else {
          tagList = tagList.map((tag: tag) => {
            if (tag.name === this.tagName) {
              tag = { ...curTag, operateType: tag.operateType === 1 ? 1 : 2 }
            }
            return tag
          })
        }
      }

      this.$store.commit('books/SET_TAGLIST', tagList)
      if (!isContinue) {
        uni.navigateBack({ delta: 1 })
      }
    },
  },
  onLoad(options: any) {
    this.type = options.type as '收入' | '支出'
    this.from = options.from
    this.index = Number(options.index)
    if (options.tagName) {
      this.tagName = options.tagName
      this.bookInfo.tagList.forEach((tag: tag) => {
        if (tag.name === options.tagName) {
          this.tag = { ...tag }
        }
      })
    }
  },
})
</script>
<style lang="less" scoped>
.tag-page {
  height: 100%;
  box-sizing: border-box;
  position: relative;
  .tag-content {
    width: calc(100vw - 80rpx);
    height: 140rpx;
    margin: 0 40rpx 20rpx;
    border-radius: 20rpx;
    background: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 40rpx;
    box-sizing: border-box;
    .tag-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 20rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .iconfont {
        font-size: 48rpx;
      }
    }
    span {
      font-size: 28rpx;
      color: #d6d6d6;
    }
  }
  /deep/.tagSelector {
    height: calc(100% - 260rpx);
  }
  .options-btn {
    width: 100vw;
    height: 98rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    button {
      width: 40%;
      height: 80rpx;
    }
  }
}
</style>